<template>
	<view class="content">
		<uni-list>
			<!--  #ifdef APP-PLUS    -->
			<uni-list-item title="深色模式" note="开启后将跟随系统" class="flex-align-center">
				<template v-slot:footer>
					<switch @change="switchThemeChange" style="transform:scale(0.8)" />
				</template>
			</uni-list-item>
			<!-- #endif -->
		</uni-list>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
	} from "@dcloudio/uni-app"

	const changeTheme = (theme) => {
		//暗黑模式
		// #ifdef APP
		console.log('✨getSystemInfoSync✨', uni.getSystemInfoSync());
		plus.nativeUI.setUIStyle(theme)
		// #endif
	}

	function switchThemeChange(e) {
		if (e.detail.value) {
			changeTheme('auto')
		} else {
			changeTheme('light')
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/styles/public.scss";

	.content {
		margin: 10px 0;
	}
</style>